<script setup>
const props = defineProps({
  role: { type: String, default: 'student' }, // student | teacher | admin
})

const map = {
  student: { text: '学生', color: 'var(--color-primary)' },
  teacher: { text: '老师', color: 'var(--color-primary)' },
  admin: { text: '管理员', color: 'var(--color-primary)' },
}

const info = map[props.role] || map.student
</script>

<template>
  <span class="role-badge" :style="{ background: info.color }">{{ info.text }}</span>
</template>

<style scoped>
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
</style>



